<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/jquery.min.js"></script>
	<link rel="stylesheet" href="../webjars/bootstrap/3.3.7-1/css/bootstrap.css" >
	<link rel="stylesheet" href="../static/jquery-easyui-1.5.5.3/themes/material-teal/easyui.css" />
	<link rel="stylesheet" href="../static/jquery-easyui-1.5.5.3/themes/icon.css" />
	<link rel="stylesheet" href="../static/css/customForm.css">
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../webjars/bootstrap/3.3.7-1/js/bootstrap.js"></script>
	<script type="text/javascript">
	$(function(){
		$('#t_accredit').datagrid({
			idField:'id',
			title: '学生列表',
			width: '100%',
			fitColumns: true,
			striped: true,
			loadMsg: '数据正在加载...',
			rownumbers: true,
			url:'listAccredit',
			onCheck:false,
			sortName:'id',
			sortOrder:'desc',
			pagination: true,
			pageSize:10,
			pageList: [ 10, 20, 25, 50],
			columns:[
				[
					{
						field: 'id',
						title: '唯一标识',
						width: 50,
						align: 'center'
					},{
						field: 'borrowedName',
						title: '借书人',
						width: 50,
						align: 'center'
					},{
						field: 'contactWay',
						title: '联系方式',
						width: 50,
						align: 'center'
					},{
						field: 'contactPhone',
						title: '联系电话',
						width: 50,
						align: 'center'
					},{
						field: 'date',
						title: '借书日期',
						width: 100,
						align: 'center'
					},{
						field: 'book',
						title: '书名',
						width: 50,
						align: 'center'
					},{
						field: 'reader',
						title: '读者ID',
						width: 50,
						align: 'center'
					},{
						field: 'accredit',
						title: '状态',
						width: 100,
						align: 'center'
					},{
						field: 'reset',
						title: '操作',
						width: 100,
						align: 'center',
						formatter:add
					}
				]
			]		
		});
		function add(value,row,index){
			if(row.accredit=="等待管理员确认"){
				
			return "<a class='easyui-linkbutton' onclick='acc("+row.id+");'>确认授权</a>";
			}
		}
		$('#searchbtn').click(function(){
			$('#t_accredit').datagrid('load',serializeForm($('#mysearch').form()));
		});
		$('#clearbtn').click(function(){
			$('#mysearch').form('clear');
			$("#t_accredit").datagrid('load', {});
		});
		
	});
	function acc(id){
		if(confirm("确定授权吗？")){
			$.post('acc', {id: id}, function(data){
				alert(data);
				$('#t_accredit').datagrid('reload');
			});
		}
	}
	//js方法，序列化表单，因为查询不传值去后台，无法辨认传的参数是否有
	function serializeForm(form){
		var obj = {};
		$('#id').val("1");
		$.each(form.serializeArray(), function(index){
			if(obj[this['name']]){
				obj[this['name']] = obj[this['name']] + ',' + this['value'];
			}else{
				obj[this['name']] = this['value'];
			}
		});
		return obj;
	}
	</script>
</head>
<body>
		<div style="padding: 20px;">
		<form id="mysearch">
			<input type="hidden" name = "id" id="id">
			<div class="col-md-3">			
				<div class="input-group">
					<span class="input-group-addon">状态</span>
					<input type="text" class="form-control" name="accredit" placeholder="状态">
				</div>
			</div>
			<div class="col-md-3">			
				<div class="input-group">
					<span class="input-group-addon">借书日期</span>
					<input type="text" class="form-control" name="date" placeholder="借书日期">
				</div>
			</div>
			<div class="btn-group">
				<button id="searchbtn" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> 查询</button>
				<button id="clearbtn" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> 清空</button>
			</div>
		</form>
	</div>
	<table id="t_accredit"></table>
</body>
</html>